<style scoped lang="less">
  @import '../../../style/components/table/editable-table.less';
</style>

<template id="vtable">
    <table>
      <thead>
        <tr>
          <input id="checkbox" type="checkbox" @click="thCheckbox()">
          <th v-for="(th,index) in thlabel" :key="index">
            {{th.label}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(data,row) in tableData" :key="row">
          <input :id="row" type="checkbox">
          <td v-for="(th,col) in thlabel" :key="col" @click="tdEdit($event,row,col,data)" @change="tdOnblur($event,row,col,data)">
            <input type="text" v-model="data[th.prop]"/>
          </td>
        </tr>
      </tbody>
    </table>
</template>
<script>
import $ from 'jquery'
export default {
  props: {
    tableData: {
      type: Array
    },
    thlabel: {
      type: Array
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    }
  },
  computed: {
  },
  mounted: function () {
    this.$nextTick(() => {
      $('td').attr('isEdit', this.isEdit)
    })
  },
  methods: {
    // 单击单元格可编辑
    tdEdit (event, row, col, data) {
      let currentRowData = data
      this.$emit('cell-click', event, row, col, currentRowData)
      var h = event.currentTarget
      if ($(h).attr('isEdit')) {
        $(h).find('input').attr('readOnly', false)
        $(h).addClass('tdclick').siblings().removeClass('tdclick')
        $(h).addClass('tdclick').parent('tr').siblings().find('td').removeClass('tdclick')
      } else {
        $(h).find('input').attr('readOnly', true)
      }
    },
    // 单元格失去焦点触发
    tdOnblur (event, row, col, data) {
      let currentRowData = data
      this.$emit('cell-change', event, row, col, currentRowData)
      var h = event.currentTarget
      if (!$(h).attr('isEdit')) {
        $(h).find('input').attr('readOnly', false)
        $(h).addClass('tdclick').siblings().removeClass('tdclick')
        $(h).addClass('tdclick').parent('tr').siblings().find('td').removeClass('tdclick')
      } else {
        $(h).find('input').attr('readOnly', true)
      }
    },
    // 表头的CheckBox
    thCheckbox () {
    }
  }
}
</script>
